<template>
	<!-- 顶部背景 -->
	<view class="normal-login-container">
		<view class="logo-box">
			<image :src="`${baseUrl}/upload/qiniu/images/icon/top.png`" alt="" class="head_bg"></image>
			<view class="head_logo">
				<img src="/static/logo.png" style="width: 100%;height: 100%;">
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="login-box" v-if="loginType == 2">
			<view class="logo-content align-center justify-center flex">
				<!-- <image style="width: 100rpx;height: 100rpx;" src="/static/logo.png" mode="widthFix">
				</image> -->
				<view class="title">
					普通登录
				</view>
			</view>
			<view class="login-form-content">
				<view class="input-item flex align-center">
					<view class="iconfont icon-user icon"></view>
					<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
				</view>
				<view class="input-item flex align-center">
					<view class="iconfont icon-password icon"></view>
					<input v-model="loginForm.password" type="password" :password="true" class="input"
						placeholder="请输入密码" maxlength="20" />
				</view>
				<view class="action-btn">
					<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
					<!-- <span @click="loginType = 1" class="cl">切换微信</span> -->
				</view>
				<view class="redio-box">
					<u-radio-group v-model="userLoginType" placement="row">
						<u-radio :customStyle="{marginRight: '8px'}" :name="1" label="普通登录"></u-radio>
						<u-radio :name="2" label="管理层登录"></u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="wxlogin-box" v-if="loginType == 1">
			<view class="title">申请获得你的公开信息（头像、昵称）</view>
			<u-button type="primary" text="微信授权登录" @click="showEmpower = true"></u-button>
			<span @click="loginType = 2" class="cl">切换账号登录</span>
		</view>
		<!-- #endif -->
		<u-toast ref="uToast"></u-toast>
		<privacy-agreement ref='showPriivacy' :privacyContractName="privacyContractName"></privacy-agreement>

		<!-- 授权弹出层 -->
		<u-popup :show="showEmpower" mode="center">
			<view class="po-box">
				<view class="title">
					微信授权
				</view>
				<view class="head_logo">
					<img src="/static/logo.png" style="width: 100%;height: 100%;">
				</view>
				<view class="title2">
					申请获取以下权限
				</view>
				<view class="title-nr">
					获取你的公开信息（头像、昵称、地区及性别）
				</view>

				<view class="title-but">
					<view class="but">
						<u-button :plain="true" text="拒绝" @click="showEmpower =false"></u-button>
					</view>
					<view class="but">
						<u-button type="primary" text="允许" @click="handWxLogin"></u-button>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getCodeImg,
		wxlogin
	} from '@/api/login'
	import {
		getUserdecrypt
	} from '@/api/system/index'
	import config from '@/config'
	import {
		setIsMobile,
		getIsMobile,
		getToken
	} from '@/utils/auth'
	import {
		toast,
		showConfirm,
		tansParams,
		showokConfirm
	} from '@/utils/common'
	export default {
		data() {
			return {
				privacyContractName: '', //隐私协议
				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度
				codeUrl: "",
				captchaEnabled: true,
				baseUrl: config.baseUrl,
				showEmpower: false,
				globalConfig: getApp().globalData.config,
				loginType: 2,
				userLoginType: 1,
				loginForm: {
					username: "",
					password: "",
					code: "",
					uuid: ''
				}
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: (e) => {
					this.statusBar = e.statusBarHeight
					const custom = wx.getMenuButtonBoundingClientRect()
					this.customBar = custom.bottom + custom.top - e.statusBarHeight
					this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height

				}
			})
			// #endif

		},
		onShow() {
			// this.obtainPermissions()
		},
		created() {
			// console.log(">>>>>",getToken())
			if (getToken()) {
				this.$tab.reLaunch('/pages/index/index')
				return false
			}
			// this.$nextTick(()=>{

			// 	this.handWxLogin()
			// })

			// console.info("getIsMobile",getIsMobile())

		},
		methods: {
			obtainPermissions() {
				wx.getPrivacySetting({
					success: res => {
						console.log(
							res
						) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
						// 隐私弹框
						if (!res.needAuthorization) {
							console.log('触发隐私弹框', res.privacyContractName)
							this.privacyContractName = res.privacyContractName
							this.$refs.showPriivacy.visible = true
							return
						}
						this.privacyContractName = res.privacyContractName
					},
					fail: () => {},
					complete: () => {}
				})
			},

			handWxLogin() {
				var that = this
				that.$refs.uToast.show({
					type: 'loading',
					message: "登录中..."

				})
				var timestamp = that.$utils.nowTtime()
				const data = {
					code: '',
					type: 2,
				}
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(res) {
						var code = res.code
						data.code = code
						//签名
						that.$store.dispatch('wxLogin', data).then((res) => {

							if (res.code == 0) {
								//登录成功
								var data = res.data
								//判断当前手机号是否绑定
								if (data.identity === 0) {
									setIsMobile(0)

									//设置用户信息
									showokConfirm('请先绑定手机号').then(res => {
										if (res.confirm) {
											uni.reLaunch({
												url: '/pages/mine/info/index'
											})
										}
									})
									// that.loginSuccess(res)

								} else {
									that.loginSuccess(res)
								}
							}
						}).catch(() => {

						})
					}
				});
			},
			handleLogin() {

				if (this.loginForm.username == "" || this.loginForm.username == null) {
					this.$refs.uToast.show({
						type: 'error',
						message: '账号不能为空'
					});
					return false;
				}
				if (this.loginForm.password == "" || this.loginForm.password == null) {
					this.$refs.uToast.show({
						type: 'error',
						message: '密码不能为空'
					});
					return false;
				}
				this.loginForm.userLoginType = this.userLoginType
				this.$store.dispatch('Login', this.loginForm).then((res) => {
					if (res.code == 0) {
						this.loginSuccess(res)
					}
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index/index')
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5FF;
	}

	.normal-login-container {
		width: 100%;

		.logo-box {
			position: relative;

			.head_bg {
				width: 100%;
				height: 600rpx;
			}

			.head_logo {
				position: absolute;
				width: 91px;
				height: 91px;
				border-radius: 50%;
				margin: auto;
				background-color: #ffffff;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}

		.login-box {

			width: 90%;
			margin: 0 auto;
			// height: 500rpx;
			background-color: #fff;
			padding: 40rpx 0rpx 160rpx 0rpx;
		}

		.wxlogin-box {

			width: 90%;
			margin: 0 auto;
			// height: 500rpx;
			// background-color: #fff;
			padding: 50rpx 0rpx 160rpx 0rpx;

			.title {
				text-align: center;
				padding: 40rpx 0px;
			}

		}

		.po-box {
			width: 600rpx;
			padding: 20rpx 0rpx 40rpx 0px;

			.title {
				width: 100%;
				text-align: center;
				padding: 30rpx 0px;
				border-bottom: 1px solid #ccc;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.head_logo {
				width: 91rpx;
				height: 91rpx;
				border-radius: 50%;
				margin: auto;
				background-color: #ffffff;

			}

			.title2 {
				width: 100%;
				text-align: center;
				font-weight: bold;
				padding: 20rpx 0px;
			}

			.title-nr {
				padding: 20rpx 40rpx;
				color: #999;
			}

			.title-but {
				padding: 10rpx 30px 0px 30rpx;

				display: flex;
				justify-content: space-between;

				.but {
					width: 45%;
				}

				.but:nth-child(1) {
					margin-right: 20rpx;
				}
			}
		}

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 20px;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
				color: #3477FC;
				font-size: 20px;
				font-weight: bold;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}

		.cl {
			display: block;
			padding: 20rpx;
			/* margin-top: 20px; */
			color: blue;
		}

		.redio-box {
			padding: 40rpx 0rpx;
		}
	}
</style>